import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';


const App = ()=>{
    const [counter, setCounter] = useState(0);
    const ref = useRef(counter);

    useEffect(()=>{
        const clock = setInterval(()=>{
            setCounter(counter + 1);
        },1000);
        console.log('setinterval:', clock);

        return ()=>{
            console.log('clear:', clock);
            clearInterval(clock);
        };
    },[]);

    return (
        <React.Fragment>
            <div>
                <span>This number is :</span>
                <span>{ counter }</span>
            </div>
            <div>
                {/* <button onClick={log}>+</button> */}
            </div>
        </React.Fragment>
        
    )
}


ReactDOM.render(
    <App />,
    document.getElementById('root')
);


